<template>
  <div class="page luckdraw-coin-market-detail">
    <div class="luckdraw-coin-market-detail-container">
      <div class="top-section">
        <img class="avatar" :src="pageData.type === 2 ? pageData.buyer_headimgurl : pageData.seller_headimgurl"/>
        <div class="detail">
          <div class="name">{{pageData.type === 2 ? pageData.buyer : pageData.seller}}</div>
          <div class="intro">期望{{type}}：{{pageData.amount}} 金币</div>
          <div class="intro">期望金额：{{price}} 元</div>
          <div class="date">发布日期：{{createdTime}}</div>
        </div>
      </div>
      <div class="intro-list">
        <div class="item">
          <div class="item-box">
            <div class="value">{{pageData.type === 2 ? pageData.buyer_trade_count : pageData.seller_trade_count}}</div>
            <div>交易次数</div>
          </div>
        </div>
        <div class="item">
          <div class="item-box">
            <div class="value">微信</div>
            <div>联系方式</div>
          </div>
        </div>
      </div>
      <div class="warn">
        <div class="title">交易提醒</div>
        <div class="content">
          <p>1. 交易前请详细了解对方的交易信息；</p>
          <p>2. 请通过平台添加对方的微信，并保存好相关的聊天记录；</p>
          <p>3. 如遇到交易纠纷，请自行解决；</p>
          <p>4. 交易金额超过500元以上，可申请平台官方担保交易，官方将收取对应手续费。具体可通过“我的”-“设置”-“联系我们”与我们客服沟通。</p>
        </div>
      </div>
      <div class="btn-section">
        <div class="btn-inner">
          <m-button text="联系ta" @onClick="onBtnClick"></m-button>
        </div>
      </div>
    </div>
    <m-dialog
      :show.sync="showCreaterDialog"
      title="发起人微信"
      :content="[`昵称：${pageData.type === 2 ? pageData.buyer : pageData.seller}`, `微信号：${pageData.contact}`]"
      :avatar="pageData.type === 2 ? pageData.buyer_headimgurl : pageData.seller_headimgurl"
      button="一键复制微信号"
      @onClick="onCreaterWechatCopyClick"></m-dialog>
  </div>
</template>

<script>
import MButton from 'comp/m-button'
import MDialog from 'comp/m-dialog'
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  components: {
    MButton,
    MDialog
  },
  data () {
    return {
      showCreaterDialog: false,
      pageData: {}
    }
  },
  computed: {
    createdTime () {
      let output
      const time = this.pageData.created
      if (time) {
        output = this.timeFilter(time)
      }
      return output
    },
    type () {
      let type = ''
      if (this.pageData.type === 1) {
        type = '出售'
      } else if (this.pageData.type === 2) {
        type = '购买'
      }
      return type
    },
    price () {
      let output = ''
      if (this.pageData.price) {
        output = this.pageData.price.toFixed(2)
      }
      return output
    }
  },
  mounted () {
    this.resetData()
    this.queryOrderDetail()
  },
  methods: {
    async queryOrderDetail () {
      const orderId = this.$root.$mp.query.orderId
      const ret = await this.$store.dispatch('queryOrderDetail', {
        orderid: orderId
      })
      this.pageData = ret
    },
    onBtnClick () {
      this.showCreaterDialog = true
    },
    /**
     * 复制发起人的微信号
     */
    onCreaterWechatCopyClick () {
      wx.setClipboardData({
        data: this.pageData.contact,
        success: (res) => {
          wx.showToast({
            title: '复制成功'
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.luckdraw-coin-market-detail {
  &-container {
    padding-bottom: 146rpx;
  }
  .top-section {
    display: flex;
    align-items: center;
    position: relative;
    padding: 30rpx 30rpx;
    background-color: #fff;
    &:active {
      background: #d8d8d8;
    }
    .avatar {
      width: 100rpx;
      height: 100rpx;
    }
    .detail {
      flex: 1;
      padding-left: 24rpx;
      .name {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 10rpx;
      }
      .intro {
        font-size: 30rpx;
        color: #333;
        padding-top: 14rpx;
      }
      .date {
        font-size: 30rpx;
        color: #777;
        padding-top: 14rpx;
      }
    }
  }
  .intro-list {
    display: flex;
    background-color: #fff;
    border-top: 1rpx solid #e6ebf0;
    .item {
      flex: 1;
      text-align: center;
      color: #777;
      font-size: 28rpx;
      padding: 30rpx 0;
      .value {
        color: #333;
        font-size: 32rpx;
      }
      &:first-child .item-box {
        border-right: 1rpx solid #e6ebf0;
      }
    }
  }
  .warn {
    background-color: #fff;
    padding: 30rpx 30rpx 27rpx;
    margin-top: 20rpx;
    .title {
      font-size: 30rpx;
      color: #333;
    }
    .content {
      font-size: 28rpx;
      padding-top: 20rpx;
      color: #555;
      p {
        line-height: 1.5;
        padding: 6rpx 0;
      }
    }
  }
  .btn-section {
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
    height: 126rpx;
    background-color: #fff;
    border-top: 1rpx solid #ddd;
    .btn-inner {
      flex: 1;
      padding: 20rpx 20rpx;
      &:nth-child(2) {
        padding-left: 0;
      }
    }
  }
}
</style>
